
.main_window{
  overflow: hidden;
  display: block;
  padding: 0;
  margin: 0 auto;
  width: 100%;
  height: 150px;
  background-image: url(../icon/map.jpg);
  background-size:contain;
  border-radius: 5px;
  position: relative;
}
div{
  margin: 0px;
  padding: 0px;
}

.cloud{
  width: 80px;
  height: 20px;
  background-color: #fff;   
  border-radius: 30px;
  position: absolute; 
  margin-top: -200px;
}

[data-type=white_1]:before{
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  top: -10px;
  left: 10px;
  background-color: #fff;   
  border-radius: 30px;
  position: absolute;
  box-shadow: 11px 2px 0  15px #fff, 25px 8px 0 10px #fff, 25px 0 0 -5px #fff;  
}
[data-type=white_2]:before{
  content: "";
  display: block;
  width: 20px;
  height: 10px;
  top: -10px;
  left: 10px;
  background-color: #fff;   
  border-radius: 30px;
  position: absolute;
  box-shadow: 11px 2px 0  15px #fff, 25px 8px 0 10px #fff, 25px 0 0 -5px #fff;  
}

@-webkit-keyframes linemove
{
from {left:-90px;}
to {left:456px;}
}
@-moz-keyframes linemove
{
from {left:-90px;}
to {left:456px;}
}
@-ms-keyframes linemove
{
from {left:-90px;}
to {left:456px;}
}
@-o-keyframes linemove
{
from {left:-90px;}
to {left:456px;}
}
@keyframes linemove
{
from {left:-90px;}
to {left:456px;}
}


[data-speed="1"]{
  animation: linemove 44.01936s;
  -webkit-animation: linemove 44.01936s;

}
[data-speed="2"]{
  animation: linemove 28.67113s;
  -webkit-animation: linemove 28.67113s;

}


.cloud{
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  -webkit-animation-delay: -50s;
}